<script setup lang="ts">
import Operating from '@/pages/statistics/components/Operating.vue'
import Proceeds from '@/pages/statistics/components/Proceeds.vue'
import DishStatistics from '@/pages/statistics/components/DishStatistics.vue'
import CustomersStatistics from '@/pages/statistics/components/CustomersStatistics.vue'

function handleClickLeft() {
  uni.navigateBack()
}

const { ctx } = getCurrentInstance()
const contentHeight = ref(0)
onReady(() => {
  ctx.$uv.getRect('.content-container').then((res) => {
    // 减掉导航
    contentHeight.value = res.height - 42
  })
})
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden bg-[#f2f2f2]">
    <wd-navbar
      title="营业概况"
      left-text="返回"
      :bordered="false"
      left-arrow
      @click-left="handleClickLeft"
    />
    <date-time-range-type-picker />
    <view class="content-container flex-1">
      <wd-tabs custom-class="!bg-transparent hide-scrollbar" swipeable animated>
        <wd-tab title="营业">
          <scroll-view
            :style="{ height: `${contentHeight}px` }"
            class="box-border overflow-hidden p-[10px]"
            scroll-y
            :show-scrollbar="false"
          >
            <wd-text
              text="查询时间范围：2020/01/01 00:00:00-2020/01/01 23:59:59"
              size="12px"
              color="#666"
            />
            <operating />
          </scroll-view>
        </wd-tab>
        <wd-tab title="收款">
          <scroll-view
            :style="{ height: `${contentHeight}px` }"
            class="box-border overflow-hidden p-[10px]"
            scroll-y
            :show-scrollbar="false"
          >
            <wd-text
              text="查询时间范围：2020/01/01 00:00:00-2020/01/01 23:59:59"
              size="12px"
              color="#666"
            />
            <proceeds />
          </scroll-view>
        </wd-tab>
        <wd-tab title="菜品">
          <scroll-view
            :style="{ height: `${contentHeight}px` }"
            class="box-border overflow-hidden p-[10px]"
            scroll-y
            :show-scrollbar="false"
          >
            <wd-text
              text="查询时间范围：2020/01/01 00:00:00-2020/01/01 23:59:59"
              size="12px"
              color="#666"
            />
            <dish-statistics />
          </scroll-view>
        </wd-tab>
        <wd-tab title="顾客">
          <scroll-view
            :style="{ height: `${contentHeight}px` }"
            class="box-border overflow-hidden p-[10px]"
            scroll-y
            :show-scrollbar="false"
          >
            <wd-text
              text="查询时间范围：2020/01/01 00:00:00-2020/01/01 23:59:59"
              size="12px"
              color="#666"
            />
            <customers-statistics />
          </scroll-view>
        </wd-tab>
      </wd-tabs>
    </view>
  </view>
</template>

<style scoped lang="scss"></style>
